<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<style type="text/css">
		.btns{font-weight: bold;display: inline-block;width: 60px;height: 27px;border: #ccc;
			background: #ccc;font-size: 0.9em;text-align: center;padding-top: 0px;color: white;}
		a:hover{color:#FFFFFF}
		.btn-meau{display:-webkit-box;display:-ms-flexbox;display:flex;height:44px;width:60px;background-color:#ccc;border-radius:2px;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;transition:background .3s ease-in-out;-webkit-transition:background .3s ease-in-out;outline:0}
	</style>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="/css_z/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/index.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/loading.css"/>
    <link rel="stylesheet" href="/css_z/swiper.min.css">
    <script src="/js_z/rem.js"></script>
    <script src="/js_z/jquery.min.js" type="text/javascript"></script>
    <script src="/js_z/others.js"></script>
	<script src="/js_z/swiper.jquery.min.js"></script>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/common.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
		$(function () {

		    //根据分类查商品列表
			function queryByStatus(status,target) {
				$.get('/shop/'+status,function (data) {
                    $('#'+target).renderValues({list:data.list},{
                    	'getAddress':getAddress
					});
                });
            }
            queryByStatus(1,'foodDiv');
            queryByStatus(2,'dailyDiv');
            queryByStatus(3,'clothesDiv');
            queryByStatus(4,'electronicsDiv');

            //新品专区
			$.get('/shop/news',function (data) {
				$('#newProductTop').renderValues(
				    {
						list:[data.list[0],data.list[1]]
					},
					{
                        'getAddress':getAddress
                	}
                );
                $('#newProductBottom').renderValues(
                    {
                    	list:[data.list[2],data.list[3],data.list[4]]
               		},{
                   		'getAddress':getAddress
                	}
                );
            });
        });
	</script>

</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>		
		<!--头部区域-->
	    <header class="mui-bar mui-bar-nav" id="header">
			<a href="/mine/profiles.html"><i class="iconfont icon-fanhui"></i></a>
	        <h4>积分商城</h4>
	    </header>
		<div id="main" class="clearfloat warp">

		    <div class="mui-content">
				<!--banner开始-->
				<div class="banner swiper-container">
		            <div class="swiper-wrapper">
		                <div class="swiper-slide">
							<a href="javascript:void(0)">
								<img class="swiper-lazy" height="300px" data-src="/upload/0f41f04cc7acbe0d.jpg" alt="">
							</a>
						</div>
		                <div class="swiper-slide">
							<a href="javascript:void(0)">
								<img class="swiper-lazy" height="300px" data-src="/upload/5ab477b6N22db52f8.jpg" alt="">
							</a>
						</div>
						<div class="swiper-slide">
							<a href="javascript:void(0)">
								<img class="swiper-lazy" height="300px" data-src="/upload/59b8d845N96efaf55.jpg" alt="">
							</a>
						</div>
		                <div class="swiper-slide">
							<a href="javascript:void(0)">
								<img class="swiper-lazy" height="300px" data-src="/upload/5ad40f7fN5f1cd036.jpg" alt="">
							</a>
						</div>
		            </div>
		        </div>
		        <!--第一栏分类开始-->
		        <div class="cation clearfloat box-s">
		        	<ul>
		        		<li>
		        			<a href="#food">
		        				<img src="/img/icon/ico1.png"/>
		        				<p>食品专区</p>
		        			</a>
						</li>
		        		<li>
		        			<a href="#daily">
		        				<img src="/img/icon/ico3.png"/>
		        				<p>生活用品</p>
		        			</a>
		        		</li>
		        		<li>
		        			<a href="#electronics">
		        				<img src="/img/icon/ico2.png"/>
		        				<p>电子产品</p>
		        			</a>
		        		</li>
		        		<li>
		        			<a href="#clothes">
		        				<img src="/img/icon/ico9.png"/>
		        				<p>男女服饰</p>
		        			</a>
		        		</li>
		        	</ul>
		        </div>
		        <!--第一栏分类结束-->
		        <!--新品专区-->
		        <div class="onnew clearfloat">
		        	<div class="boutit clearfloat">
		        		<span></span>
		        		<samp>新品专区</samp>
		        	</div>
		        	<div class="content clearfloat">
						<div id="newProductTop">
							<div class="top clearfloat" render-loop="list">
								<div class="list clearfloat fl box-s">
									<a data-href="detail.html?id=" render-key="list.id" render-fun="getAddress">
										<div class="zuo clearfloat fl box-s">
											<p class="tit text" render-html="list.productName"></p>
											<p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
										</div>
										<div class="tu clearfloat fr">
											<span></span>
											<img render-src="list.coverUrl"/>
										</div>
									</a>
								</div>
							</div>
						</div>
						<div id="newProductBottom">
							<div class="bottom clearfloat" render-loop="list">
								<div class="list clearfloat fl">
									<a data-href="detail.html?id=" render-key="list.id" render-fun="getAddress">
										<div class="tu clearfloat fr">
											<span></span>
											<img render-src="list.coverUrl"/>
										</div>
										<div class="shang clearfloat fl box-s">
											<p class="tit over" render-html="list.productName"></p>
											<p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
										</div>
									</a>
								</div>
							</div>
						</div>
		        	</div>
		        </div>
		        <!--1F食品专区-->
				<div class="theme clearfloat" id="foodDiv">
		        	<div class="boutit clearfloat">
						<a name="food"></a>
						<span></span>
						<samp>1F食品专区</samp>
		        	</div>
		        	<div class="content clearfloat" render-loop="list">
		        		<div class="list clearfloat fl">
							<a data-href="detail.html?id=" render-key="list.id" render-fun="getAddress">
						        <div class="tu clearfloat fr">
						            <span></span>
						            <img render-src="list.coverUrl" />
						        </div>
						        <div class="shang clearfloat fl box-s">
						            <p class="tit over" render-html="list.productName"></p>
						            <p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
						        </div>
						    </a>
						</div>
		        	</div>
		        </div>
		        <!--2F生活用品-->
				<div class="theme clearfloat" id="dailyDiv">
		        	<div class="boutit clearfloat">
						<a name="daily"></a>
						<span></span>
		        		<samp>2F生活用品</samp>
		        	</div>
		        	<div class="content clearfloat" render-loop="list">
		        		<div class="list clearfloat fl">
							<a data-href="detail.html?id=" render-key="list.id" render-fun="getAddress">
						        <div class="tu clearfloat fr">
						            <span></span>
						            <img render-src="list.coverUrl" />
						        </div>
						        <div class="shang clearfloat fl box-s">
						            <p class="tit over" render-html="list.productName"></p>
						            <p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
						        </div>
						    </a>
						</div>
		        	</div>
		        </div>
		        <!--3F电子产品-->
		        <div class="theme clearfloat" id="electronicsDiv">
		        	<div class="boutit clearfloat">
						<a name="electronics"></a>
		        		<span></span>
		        		<samp>3F男女服装</samp>
		        	</div>
		        	<div class="content clearfloat" render-loop="list">
		        		<div class="list clearfloat fl">
							<a data-href="detail.html?id=" render-key="list.id" render-fun="getAddress">
						        <div class="tu clearfloat fr">
						            <span></span>
						            <img render-src="list.coverUrl"/>
						        </div>
						        <div class="shang clearfloat fl box-s">
						            <p class="tit over" render-html="list.productName"></p>
						            <p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
						        </div>
						    </a>
						</div>
		        	</div>
		        </div>
		        <!--4F男女服装-->
		        <div class="theme clearfloat" id="clothesDiv">
		        	<div class="boutit clearfloat">
						<a name="clothes"></a>
						<span></span>
		        		<samp>4F手机、数码配件</samp>
		        	</div>
		        	<div class="content clearfloat" render-loop="list">
		        		<div class="list clearfloat fl">
							<a data-href="detail.html?id=" render-key="list.id" render-fun="getAddress">
						        <div class="tu clearfloat fr">
						            <span></span>
						            <img render-src="list.coverUrl" />
						        </div>
						        <div class="shang clearfloat fl box-s">
						            <p class="tit over" render-html="list.productName"></p>
						            <p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
						        </div>
						    </a>
						</div>
		        	</div>
		        </div>
	        </div>
			<div id="gotop1" style="overflow:hidden;position: fixed;right:0px;bottom: 60px;z-index: 20;">
				<div style="overflow: hidden;">
					<div style="padding-top:0px;padding-bottom: 20px" id="gotop" class="btns">
						<a class="btn-meau">
							<svg xmlns="http://www.w3.org/2000/svg" width="19" height="12">
								<path d="M9.314 0l9.313 9.314-2.12 2.121-7.193-7.192-7.193 7.192L0 9.314z" fill="#FFF" fill-rule="evenodd"></path>
							</svg>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!--footer star-->
		<footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li class="active">
					<a href="index.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li>
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->
	</body>
<script>
    BackTop=function(btnId){
        var btn=document.getElementById(btnId);

        var d=document.documentElement;

        window.onscroll=set;

        btn.onclick=function (){

            btn.style.display="none";

            window.onscroll=null;

            this.timer=setInterval(function(){

                d.scrollTop-=Math.ceil(d.scrollTop*0.1);

                if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);

            },10);

        };

        function set(){btn.style.display=d.scrollTop?'block':"none"}

    };
    BackTop('gotop');
</script>
</html>